<%--
  Created by IntelliJ IDEA.
  User: 90509
  Date: 2020/9/1
  Time: 18:14
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/8/27
  Time: 23:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>

<body>
<!--表单查询-->
<div class="panel panel-primary" style="border: 1px solid dodgerblue;">
    <div class="panel-heading" style="background-color: dodgerblue;">条件查询</div>
    <br>
    <form class="form-horizontal">
        <div class="form-group">

            <label class="col-sm-2 control-label" align="right">学生姓名:</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" placeholder="请输入要查询的姓名"/>
            </div>

            <div class="col-sm-4">
                <button class="btn btn-success btn-sm">查询</button>
                <button type="button" class="btn btn-success btn-sm" onclick="addWin()">新增</button>
            </div>
        </div>
    </form>
</div>
<!--表格-->
<div class="panel panel-primary" style="border: 1px solid dodgerblue;">
    <div class="panel-heading" style="background-color: dodgerblue;">学生成绩列表</div>
    <table class="table table-bordered table-hover">
        <thead>
        <%--        <th width="5%">学生编号</th>--%>
        <th width="20%">学生</th>
        <th width="20%">课程</th>
        <th width="20%">平时成绩</th>
        <th width="20%">考试成绩</th>
        <th>操作</th>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>

</div>
<div style="position: absolute;left: 40%;">
    每页
    <select style="height: 30px;width: 60px; border: 1px solid green;" id="myrow" onchange="loadList()">
        <option value="5">5</option>
        <option value="10">10</option>
    </select>
    条

    <button class="btn btn-success btn-sm" onclick="pre()">上一页</button>
    <button class="btn btn-success btn-sm" onclick="next()">下一页</button>
    <button class="btn btn-success btn-sm" onclick="indexPage()">首页</button>
    <button class="btn btn-success btn-sm" onclick="endPages()">尾页</button>
    共<span id="total">xx</span>页
    一共<span id="pages">xx</span>条
    当前<span id="curPage">xx</span>页
</div>
<!--模态框-->
<div class="modal fade" id="myWin" style="top:200px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: dodgerblue;height: 40px;padding-top: 1px;">
                <h4 align="center" id="title">信息新增</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <input type="hidden" id="scId">
                    <input type="hidden" id="cId">
                    <div class="form-group">

                        <label class="col-sm-2 control-label" align="right">学生姓名:</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="stu" id="select_stu">
                                <option>--请选择--</option> <!-- 这个option也可以写在ajax中-->
                            </select>
                        </div>

                        <label class="col-sm-2 control-label" align="right">课程名称:</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="cource" id="select_cource">
                            <option>--请选择--</option> <!-- 这个option也可以写在ajax中-->
                            </select>
                        </div>

                        <label class="col-sm-2 control-label" align="right">平时成绩:</label>
                        <div class="col-sm-10">
                            <input type="text" id="psScore" class="form-control" placeholder="平时分数"/>
                        </div>
                        <label class="col-sm-2 control-label" align="right">考试成绩:</label>
                        <div class="col-sm-10">
                            <input type="text" id="ksScore" class="form-control" placeholder="考试分数"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" type="button" id="updateBtn" onclick="update()">修改</button>
                <button class="btn btn-success" type="button" id="addBtn" onclick="insert()">新增</button>
                <button class="btn btn-success" type="button" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    //加载事件
    $(function () {
        loadList();
    })

    var page = 1;//页码
    var endPage;//尾页
    function pre() {//上一页
        page--;
        if (page < 1) {
            page = 1;
        }
        loadList();
    }

    function next() {//下一页
        page++;
        if (page > endPage) {
            page = endPage;
        }
        loadList();
    }

    function indexPage() {//首页
        page = 1;
        loadList();
    }

    function endPages() {//尾页
        page = endPage;
        loadList();
    }

    function loadList() {//显示列表
        //获取用户选择的每页显示条数
        var row = $("#myrow").val();
        $.ajax({
            url: "${pageContext.request.contextPath}/grade/selectAll",
            data: {"page": page, "row": row},
            type: "get",
            dataType: "json",
            success: function (data) {
                //获取查询的结果集
                var list = data.data;
                //尾页
                endPage = data.endPage;
                //显示总条数
                $("#pages").text(data.total);
                //显示总页数
                $("#total").text(data.pages);
                //显示当前页
                $("#curPage").text(data.curPage);
                //拼接html的变量
                var html = "";
                for (var i = 0; i < list.length; i++) {

                    html += "<tr>" +

                        "<td>" + list[i].student.sName + "</td>" +
                        "<td>" + list[i].cource.cName + "</td>" +
                        "<td>" + list[i].psScore + "</td>" +
                        "<td>" + list[i].ksScore + "</td>" +
                        "<td hidden>" + list[i].scId + "</td>" +
                        "<td><button class='btn btn-warning btn-sm' onclick='upWindow(this)'>修改</button>&nbsp;" +
                        "<button class='btn btn-warning btn-sm' onclick='del(this)'>删除</button>" +
                        "</tr>"
                }
                //html设置文本和标签
                $("#tb").html(html);

            }
        })
    }

    //打开新增窗口
    function addWin() {
        //清空模态框的数据
        clearWin();
        //显示模态框
        $("#myWin").modal("show");
        //更改窗体的标题
        $("#title").text("信息新增");
        //隐藏修改按钮的button
        $("#updateBtn").hide();
        //显示新增按钮的button
        $("#addBtn").show();


        $.ajax({
            timeout: 3000,
            async: false,
            type: "POST",
            <%--url: "${pageContext.request.contextPath}/kaoqin/selectAllCource",--%>
            url: "${pageContext.request.contextPath}/kaoqin/selectAllCource",
            dataType: "json",

            /*  data: {
                  warehouse: $("#select_stu").val(),   //'选择框id'
                  warehouse: $("#select_cource").val(),   //'选择框id'
              },*/
            success: function (data) {
                console.log(data);

                var stuList = data.student;
                var courceList = data.cource;

                for (var i = 0; i < stuList.length; i++) {

                    $("#select_stu").append("<option value="+stuList[i].sId+">" + stuList[i].sName + "</option>");

                }
                for (var i = 0; i < courceList.length; i++) {

                    $("#select_cource").append("<option value="+courceList[i].cId+">" + courceList[i].cName + "</option>");

                }
            }
        });

    }

    //新增数据
    function insert() {
        //获取员工姓名
        var psScore = $("#psScore").val();
        var ksScore = $("#ksScore").val();

        var sId =  $("#select_stu").val();
        var cId =  $("#select_cource").val();

        $.ajax({
            url: "${pageContext.request.contextPath}/grade/add",
            data: {"sId": sId,"ksScore": ksScore, "psScore": psScore, "cId":cId},
            type: "get",

            dataType: "json",
            success: function (data) {
                if (data.info == "新增成功") {
                    $("#myWin").modal("hide");

                    //刷新
                    loadList();
                } else {
                    alert(data.info);
                }

            }
        })
    }

    //清空
    function clearWin() {
        $("#myId").val("");
        $("#uname").val("");
        $("#userName").val("");
        $("#userPwd").val("");
    }

    //打开修改窗口
    function upWindow(obj) {
        //显示模态框
        $("#myWin").modal("show");
        //更改窗体的标题
        $("#title").text("信息修改");
        //隐藏新增按钮的button
        $("#addBtn").hide();
        //显示修改按钮的button
        $("#updateBtn").show();


        //获取选中行的的第二列的数据
        var name = $(obj).parent().parent().find("td").eq(0).text();
        //设置模态框中 的值
        $("#select_stu").val(name);

        //获取选中行的的第三列的数据
        var cource = $(obj).parent().parent().find("td").eq(1).text();
        //设置模态框中 的值
        $("#select_cource").val(cource);

        //获取选中行的的第四列的数据
        var psScore = $(obj).parent().parent().find("td").eq(2).text();
        //设置模态框中 的值
        $("#psScore").val(psScore);

        var ksScore = $(obj).parent().parent().find("td").eq(3).text();
        //设置模态框中 的值
        $("#ksScore").val(ksScore);

        var scId = $(obj).parent().parent().find("td").eq(4).text();

        //设置模态框中 的值
        $("#scId").val(scId);

        $.ajax({
            timeout: 3000,
            async: false,
            type: "POST",
            <%--url: "${pageContext.request.contextPath}/kaoqin/selectAllCource",--%>
            url: "${pageContext.request.contextPath}/kaoqin/selectAllCource",
            dataType: "json",

            /*  data: {
                  warehouse: $("#select_stu").val(),   //'选择框id'
                  warehouse: $("#select_cource").val(),   //'选择框id'
              },*/
            success: function (data) {
                console.log(data);

                var stuList = data.student;
                var courceList = data.cource;

                for (var i = 0; i < stuList.length; i++) {

                    $("#select_stu").append("<option value="+stuList[i].sId+">" + stuList[i].sName + "</option>");

                }
                for (var i = 0; i < courceList.length; i++) {
                    var courceName = courceList[i].cName;
                    var hqCName = $("#select_cource").val();
<%--                    <c:if test="${courceName == hqCName }">selected="selected"</c:if>--%>
                    $("#select_cource").append("<option value="+courceList[i].cId+">" + courceList[i].cName + "</option>");

                }
            }
        });
    }

    //修改数据
    function update() {
        var psScore = $("#psScore").val();
        var ksScore = $("#ksScore").val();

        var sId =  $("#select_stu").val();
        var cId =  $("#select_cource").val();
        var scId = $("#scId").val();
        $.ajax({
            url: "${pageContext.request.contextPath}/grade/update",
            data: {"sId": sId, "ksScore": ksScore,"psScore": psScore, "scId": scId,"cId":cId},
            type: "get",
            dataType: "json",
            success: function (data) {
                if (data.info == "修改成功") {
                    $("#myWin").modal("hide")
                    //刷新
                    loadList();
                } else {
                    alert(data.info);
                }

            }
        })
    }

    //删除
    function del(obj) {
        var info = confirm("你确定要删除吗")
        if (info) {
            //获取要删除的id
            var id = $(obj).parent().parent().find("td").eq(4).text();
            $.ajax({
                url: "${pageContext.request.contextPath}/grade/delete",
                data: {"scId": id},
                type: "get",
                dataType: "json",
                success: function (data) {
                    if (data.info == "删除成功") {
                        $("#myWin").modal("hide")
                        //刷新
                        loadList();
                    } else {
                        alert(data.info);
                    }

                }
            })
        }
    }
</script>
